<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen">
/*<![CDATA[*/
		body {
			font-size: small;
			font-family: Verdana,Arial,sans-serif;
			background-color: #ccc;
		}
		#container {
			background-color: #fff;
			width: 950px;
			margin-right: auto;
			margin-left: auto;
			margin-top: 10px;
			margin-bottom: 20px;
			padding: 20px;
		}
		ul.entries {
			margin-top: 5px;
			margin-bottom: 20px;
		}
		ul.entries li {
			line-height: 1.2em;
			margin-top: .5em;
			list-style: none;
		}
		ul.entries span.updated {
			font-size: 0.7em;
			color: #888;
		}
		table.am {
			margin-top: 5px;
			margin-bottom: 10px;
			border-spacing: .75em;
			/*margin-left: auto;
			margin-right: auto;*/
		}
		table.am th{
			vertical-align: bottom;
			font-weight: normal;
			border-bottom: 1px solid black;
			width: 27%;
		}
		table.am th.author {
			width: 19%;
		}
		table.am td{
			text-align: left;
			vertical-align: top;
			width: 27%;
		}
		table.am td.author {
			text-align: left;
			width: 19%;
		}
		h1, h2, h3 {
			margin-top: 10px;
			margin-bottom: 5px;
			font-style: normal;
			font-weight: normal;
		}
		h3 {
			margin-top: 5px;
			font-size: 1.1em;
		}
		h2 {
			font-size: 1.5em;
		}
		h1 {
			font-size: 1.7em;
		}
		.invalid, .errorMessage {
			background-color: #FCC;
		}
		.errorMessage {
			font-weight: bold;
			line-height:;
		}
		.ingroup {
			color: rgb(204,102,0);
			font-weight: bold;
		}
		.count {
			display: block;
			float: left;
			font-size: 1.5em;
			color: #777;
			padding-right: .5em;
			padding-bottom: .25em;
		}
		.sorting_asc {
			background: url('media/sort_asc.png') no-repeat center right;
		}

		.sorting_desc {
			background: url('media/sort_desc.png') no-repeat center right;
		}

		.sorting {
			background: url('media/sort_both.png') no-repeat center right;
		}
		.partBlurb {
			margin-top: .5em;
			margin-bottom: .5em;
		}
		.partBlurb img {
			height: 96px;
			width: 96px;
			overflow: hidden;
		}
		/*]]>*/
		</style>
		<title>
			Web Marketing Buzz Networks
		</title>
	</head>
	<body>
		<div id="container">
			<h1>
				Web Marketing Buzz Networks as of {{dateRun|date:"H:i:s, F j, Y"}}
			</h1>
			<p>
				This table shows the buzz networks for <span class="ingroup">participants</span> in <a href="http://AlgorithmicAdvertising.com/">Eastern Michigan University's Web Marketing Practicum, Summer 2010</a>. <span class='ingroup'>Bud Gibson</span> is the professor leading the course. Everyone else is a <span class='ingroup'>student</span>. A goal of online networking is to help <span class='ingroup'>students</span> enhance their professional networks. <span class='ingroup'>Students</span> are using Buzz and Twitter. The table below shows how networks have developed for Google Buzz.
			</p> 
			<table class='am' id='participants'>
				<thead>
					<tr>
						<th class='author'>
							Participant
						</th>
						<th>
							Level
						</th>
						<th>
							Public Ties
						</th>
						<th>
							In Network Ties
						</th>
					</tr>
				</thead>
				<tbody>
					{% for participant in participants %}
					<tr>
						<td class="author">
							<span>{{participant.displayName|safe}}</span>
							<p class='partBlurb'>
								<img src='{{participant.thumbnailUrl}}' alt='{{participant.displayName}}' />
							</p>
							<p class='partBlurb'>
								<a target="_blank" title="Follow on Google Buzz" class="google-buzz-button" href="{{participant.profileUrl}}" data-button-style="follow">Follow on Buzz</a>
							</p>
						</td>
						<td>
							<span class='count' title='{{participant.depth}}'>{{participant.depth}}</span>
						</td>
						<td>
							<span class='count' title='{{participant.count_ties}}'>{{participant.count_ties}}</span>
						</td>
						<td>
							<span class='count' title='{{participant.count_net_ties}}'>{{participant.count_net_ties}}</span>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"> </script>		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
		<script type="text/javascript" src="media/jquery.dataTables.min.js"> </script>
		<script type="text/javascript">
		jQuery.fn.dataTableExt.oSort['title-numeric-asc']  = function(a,b) {
			var x = a.match(/title="*(-?[0-9]+)/)[1];
			var y = b.match(/title="*(-?[0-9]+)/)[1];
			x = parseFloat( x );
			y = parseFloat( y );
			return ((x < y) ? -1 : ((x > y) ?  1 : 0));
		};
		jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
			var x = a.match(/title="*(-?[0-9]+)/)[1];
			var y = b.match(/title="*(-?[0-9]+)/)[1];
			x = parseFloat( x );
			y = parseFloat( y );
			return ((x < y) ?  1 : ((x > y) ? -1 : 0));
		};
		$(document).ready(function() {
			$('#participants').dataTable({
					"bPaginate": false,
					"bLengthChange": false,
					"bFilter": false,
					"bSort": true,
					"bInfo": false,
					"bAutoWidth": false, 
					"aoColumns": [
								null,
								{ "sType": "title-numeric" },
								{ "sType": "title-numeric" },
								{ "sType": "title-numeric" }
							]});
		});
		</script>
	</body>
</html>
